<!DOCTYPE html>
<html class="default">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="x-ua-compatible" content="IE=edge" />
    <title>@supabase/supabase-js</title>
    <meta name="description" content="Documentation for @supabase/supabase-js" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="stylesheet" href="assets/style.css" />
    <link rel="stylesheet" href="assets/highlight.css" />
    <script async src="assets/search.js" id="search-script"></script>
  </head>
  <body>
    <script>
      document.body.classList.add(localStorage.getItem('tsd-theme') || 'os')
    </script>
    <header>
      <div class="tsd-page-toolbar">
        <div class="container">
          <div class="table-wrap">
            <div class="table-cell" id="tsd-search" data-base=".">
              <div class="field">
                <label for="tsd-search-field" class="tsd-widget search no-caption">Search</label
                ><input type="text" id="tsd-search-field" />
              </div>
              <ul class="results">
                <li class="state loading">Preparing search index...</li>
                <li class="state failure">The search index is not available</li>
              </ul>
              <a href="index.html" class="title">@supabase/supabase-js</a>
            </div>
            <div class="table-cell" id="tsd-widgets">
              <div id="tsd-filter">
                <a href="#" class="tsd-widget options no-caption" data-toggle="options">Options</a>
                <div class="tsd-filter-group">
                  <div class="tsd-select" id="tsd-filter-visibility">
                    <span class="tsd-select-label">All</span>
                    <ul class="tsd-select-list">
                      <li data-value="public">Public</li>
                      <li data-value="protected">Public/Protected</li>
                      <li data-value="private" class="selected">All</li>
                    </ul>
                  </div>
                  <input type="checkbox" id="tsd-filter-inherited" checked /><label
                    class="tsd-widget"
                    for="tsd-filter-inherited"
                    >Inherited</label
                  ><input type="checkbox" id="tsd-filter-externals" checked /><label
                    class="tsd-widget"
                    for="tsd-filter-externals"
                    >Externals</label
                  >
                </div>
              </div>
              <a href="#" class="tsd-widget menu no-caption" data-toggle="menu">Menu</a>
            </div>
          </div>
        </div>
      </div>
      <div class="tsd-page-title">
        <div class="container"><h1>@supabase/supabase-js</h1></div>
      </div>
    </header>
    <div class="container container-main">
      <div class="row">
        <div class="col-8 col-content">
          <div class="tsd-panel tsd-typography">
            <a href="#supabase-js" id="supabase-js" style="color: inherit; text-decoration: none">
              <h1><code>supabase-js</code></h1>
            </a>
            <p>An isomorphic JavaScript client for Supabase.</p>
            <ul>
              <li>
                <strong>Documentation:</strong>
                <a href="https://supabase.com/docs/client/supabase-client"
                  >https://supabase.com/docs/client/supabase-client</a
                >
              </li>
              <li>
                TypeDoc:
                <a href="https://supabase.github.io/supabase-js"
                  >https://supabase.github.io/supabase-js</a
                >
              </li>
            </ul>

            <a href="#usage" id="usage" style="color: inherit; text-decoration: none">
              <h2>Usage</h2>
            </a>
            <p>First of all, you need to install the library:</p>
            <pre><code class="language-sh"><span class="hl-0">npm install @supabase/supabase-js</span>
</code></pre>
            <p>
              Then you&#39;re able to import the library and establish the connection with the
              database:
            </p>
            <pre><code class="language-js"><span class="hl-1">import</span><span class="hl-0"> { </span><span class="hl-2">createClient</span><span class="hl-0"> } </span><span class="hl-1">from</span><span class="hl-0"> </span><span class="hl-3">&#39;@supabase/supabase-js&#39;</span><br/><br/><span class="hl-4">// Create a single supabase client for interacting with your database</span><br/><span class="hl-5">const</span><span class="hl-0"> </span><span class="hl-6">supabase</span><span class="hl-0"> = </span><span class="hl-7">createClient</span><span class="hl-0">(</span><span class="hl-3">&#39;https://xyzcompany.supabase.co&#39;</span><span class="hl-0">, </span><span class="hl-3">&#39;public-anon-key&#39;</span><span class="hl-0">)</span>
</code></pre>

            <a href="#umd" id="umd" style="color: inherit; text-decoration: none">
              <h3>UMD</h3>
            </a>
            <p>
              You can now use plain <code>&lt;script&gt;</code>s to import supabase-js from CDNs,
              like:
            </p>
            <pre><code class="language-html"><span class="hl-8">&lt;</span><span class="hl-9">script</span><span class="hl-10"> </span><span class="hl-11">src</span><span class="hl-10">=</span><span class="hl-12">&quot;https://cdn.jsdelivr.net/npm/@supabase/supabase-js&quot;</span><span class="hl-8">&gt;&lt;/</span><span class="hl-9">script</span><span class="hl-8">&gt;</span>
</code></pre>
            <p>or even:</p>
            <pre><code class="language-html"><span class="hl-8">&lt;</span><span class="hl-9">script</span><span class="hl-10"> </span><span class="hl-11">src</span><span class="hl-10">=</span><span class="hl-12">&quot;https://unpkg.com/@supabase/supabase-js&quot;</span><span class="hl-8">&gt;&lt;/</span><span class="hl-9">script</span><span class="hl-8">&gt;</span>
</code></pre>
            <p>Then you can use it from a global <code>supabase</code> variable:</p>
            <pre><code class="language-html"><span class="hl-8">&lt;</span><span class="hl-9">script</span><span class="hl-8">&gt;</span><br/><span class="hl-10">  </span><span class="hl-5">const</span><span class="hl-10"> { </span><span class="hl-6">createClient</span><span class="hl-10"> } </span><span class="hl-0">=</span><span class="hl-10"> </span><span class="hl-2">supabase</span><br/><span class="hl-10">  </span><span class="hl-5">const</span><span class="hl-10"> </span><span class="hl-6">_supabase</span><span class="hl-10"> </span><span class="hl-0">=</span><span class="hl-10"> </span><span class="hl-7">createClient</span><span class="hl-10">(</span><span class="hl-3">&#39;https://xyzcompany.supabase.co&#39;</span><span class="hl-10">, </span><span class="hl-3">&#39;public-anon-key&#39;</span><span class="hl-10">)</span><br/><br/><span class="hl-10">  </span><span class="hl-2">console</span><span class="hl-10">.</span><span class="hl-7">log</span><span class="hl-10">(</span><span class="hl-3">&#39;Supabase Instance: &#39;</span><span class="hl-10">, </span><span class="hl-2">_supabase</span><span class="hl-10">)</span><br/><span class="hl-10">  </span><span class="hl-4">// ...</span><br/><span class="hl-8">&lt;/</span><span class="hl-9">script</span><span class="hl-8">&gt;</span>
</code></pre>

            <a href="#esm" id="esm" style="color: inherit; text-decoration: none">
              <h3>ESM</h3>
            </a>
            <p>
              You can now use type=&quot;module&quot; <code>&lt;script&gt;</code>s to import
              supabase-js from CDNs, like:
            </p>
            <pre><code class="language-html"><span class="hl-8">&lt;</span><span class="hl-9">script</span><span class="hl-10"> </span><span class="hl-11">type</span><span class="hl-10">=</span><span class="hl-12">&quot;module&quot;</span><span class="hl-8">&gt;</span><br/><span class="hl-10">  </span><span class="hl-1">import</span><span class="hl-10"> { </span><span class="hl-2">createClient</span><span class="hl-10"> } </span><span class="hl-1">from</span><span class="hl-10"> </span><span class="hl-3">&#39;https://cdn.jsdelivr.net/npm/@supabase/supabase-js/+esm&#39;</span><br/><span class="hl-10">  </span><span class="hl-5">const</span><span class="hl-10"> </span><span class="hl-6">supabase</span><span class="hl-10"> </span><span class="hl-0">=</span><span class="hl-10"> </span><span class="hl-7">createClient</span><span class="hl-10">(</span><span class="hl-3">&#39;https://xyzcompany.supabase.co&#39;</span><span class="hl-10">, </span><span class="hl-3">&#39;public-anon-key&#39;</span><span class="hl-10">)</span><br/><br/><span class="hl-10">  </span><span class="hl-2">console</span><span class="hl-10">.</span><span class="hl-7">log</span><span class="hl-10">(</span><span class="hl-3">&#39;Supabase Instance: &#39;</span><span class="hl-10">, </span><span class="hl-2">supabase</span><span class="hl-10">)</span><br/><span class="hl-10">  </span><span class="hl-4">// ...</span><br/><span class="hl-8">&lt;/</span><span class="hl-9">script</span><span class="hl-8">&gt;</span>
</code></pre>

            <a
              href="#custom-fetch-implementation"
              id="custom-fetch-implementation"
              style="color: inherit; text-decoration: none"
            >
              <h3>Custom <code>fetch</code> implementation</h3>
            </a>
            <p>
              <code>supabase-js</code> uses the
              <a href="https://www.npmjs.com/package/cross-fetch"><code>cross-fetch</code></a>
              library to make HTTP requests, but an alternative <code>fetch</code> implementation
              can be provided as an option. This is most useful in environments where
              <code>cross-fetch</code> is not compatible, for instance Cloudflare Workers:
            </p>
            <pre><code class="language-js"><span class="hl-1">import</span><span class="hl-0"> { </span><span class="hl-2">createClient</span><span class="hl-0"> } </span><span class="hl-1">from</span><span class="hl-0"> </span><span class="hl-3">&#39;@supabase/supabase-js&#39;</span><br/><br/><span class="hl-4">// Provide a custom `fetch` implementation as an option</span><br/><span class="hl-5">const</span><span class="hl-0"> </span><span class="hl-6">supabase</span><span class="hl-0"> = </span><span class="hl-7">createClient</span><span class="hl-0">(</span><span class="hl-3">&#39;https://xyzcompany.supabase.co&#39;</span><span class="hl-0">, </span><span class="hl-3">&#39;public-anon-key&#39;</span><span class="hl-0">, {</span><br/><span class="hl-0">  </span><span class="hl-7">fetch</span><span class="hl-2">:</span><span class="hl-0"> (...</span><span class="hl-2">args</span><span class="hl-0">) </span><span class="hl-5">=&gt;</span><span class="hl-0"> </span><span class="hl-7">fetch</span><span class="hl-0">(...</span><span class="hl-2">args</span><span class="hl-0">),</span><br/><span class="hl-0">})</span>
</code></pre>

            <a href="#sponsors" id="sponsors" style="color: inherit; text-decoration: none">
              <h2>Sponsors</h2>
            </a>
            <p>
              We are building the features of Firebase using enterprise-grade, open source products.
              We support existing communities wherever possible, and if the products don’t exist we
              build them and open source them ourselves. Thanks to these sponsors who are making the
              OSS ecosystem better for everyone.
            </p>
            <p>
              <a href="https://github.com/sponsors/supabase"
                ><img
                  src="https://user-images.githubusercontent.com/10214025/90518111-e74bbb00-e198-11ea-8f88-c9e3c1aa4b5b.png"
                  alt="New Sponsor"
              /></a>
            </p>
          </div>
        </div>
        <div class="col-4 col-menu menu-sticky-wrap menu-highlight">
          <nav class="tsd-navigation primary">
            <ul>
              <li class="current"><a href="modules.html">Modules</a></li>
              <li class="tsd-kind-module"><a href="modules/index.html">index</a></li>
              <li class="tsd-kind-module">
                <a href="modules/lib_SupabaseQueryBuilder.html"
                  >lib/<wbr />Supabase<wbr />Query<wbr />Builder</a
                >
              </li>
              <li class="tsd-kind-module">
                <a href="modules/lib_SupabaseRealtimeClient.html"
                  >lib/<wbr />Supabase<wbr />Realtime<wbr />Client</a
                >
              </li>
              <li class="tsd-kind-module">
                <a href="modules/lib_constants.html">lib/constants</a>
              </li>
              <li class="tsd-kind-module"><a href="modules/lib_helpers.html">lib/helpers</a></li>
              <li class="tsd-kind-module"><a href="modules/lib_types.html">lib/types</a></li>
              <li class="tsd-kind-module"><a href="modules/lib_version.html">lib/version</a></li>
            </ul>
          </nav>
        </div>
      </div>
    </div>
    <footer class="with-border-bottom">
      <div class="container">
        <h2>Legend</h2>
        <div class="tsd-legend-group">
          <ul class="tsd-legend">
            <li class="tsd-kind-variable"><span class="tsd-kind-icon">Variable</span></li>
            <li class="tsd-kind-function"><span class="tsd-kind-icon">Function</span></li>
            <li class="tsd-kind-type-alias"><span class="tsd-kind-icon">Type alias</span></li>
            <li class="tsd-kind-type-alias tsd-has-type-parameter">
              <span class="tsd-kind-icon">Type alias with type parameter</span>
            </li>
          </ul>
          <ul class="tsd-legend">
            <li class="tsd-kind-class"><span class="tsd-kind-icon">Class</span></li>
            <li class="tsd-kind-class tsd-has-type-parameter">
              <span class="tsd-kind-icon">Class with type parameter</span>
            </li>
          </ul>
          <ul class="tsd-legend">
            <li class="tsd-kind-interface"><span class="tsd-kind-icon">Interface</span></li>
          </ul>
        </div>
        <h2>Settings</h2>
        <p>
          Theme
          <select id="theme">
            <option value="os">OS</option>
            <option value="light">Light</option>
            <option value="dark">Dark</option>
          </select>
        </p>
      </div>
    </footer>
    <div class="container tsd-generator">
      <p>Generated using <a href="https://typedoc.org/" target="_blank">TypeDoc</a></p>
    </div>
    <div class="overlay"></div>
    <script src="assets/main.js"></script>
  </body>
</html>
